<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      width: 600px;
      text-align: center;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 12px;
    }

    th {
      background-color: #f0f0f0;
      font-weight: bold;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    h2 {
      margin-bottom: 20px;
      color: #333;
    }
  </style>
</head>
<body>
<div class="container">
  <h2>所有用户（管理员）</h2>
  <table>
    <thead>
    <tr><th>ID</th><th>用户名</th></tr>
    </thead>
    <tbody id="userTable"></tbody>
  </table>
</div>

<script>
  const token = localStorage.getItem('token');
  if (!token) {
    location.href = '/login.html';
  } else {
    fetch('/api/user/list', {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer ' + token
      }
    }).then(res => {
      if (res.status === 403 || res.status === 401) {
        location.href = '/login.html';
        return;
      }
      return res.json();
    }).then(users => {
      if (users) {
        userTable.innerHTML = users.map(u =>
          `<tr><td>${u.id}</td><td>${u.username}</td></tr>`
        ).join('');
      }
    }).catch(err => {
      console.error('请求失败：', err);
      location.href = '/login.html';
    });
  }
</script>
</body>
</html>
